<template>
    <div class="h100 h-start-center">
        <div class="tree-content h100 p20">
            <div class="f16 fw5 fam pb10">申报流程</div>
            <a-steps progress-dot direction="vertical" size="small" :current="stepObj.current">
                <a-step
                    class="pb20"
                    v-for="(item, index) in stepObj.list"
                    :disabled="item.disabled"
                    :title="item.label"
                    :key="index"
                ></a-step>
            </a-steps>
        </div>
        <div class="table h100 v-start-center">
            <a-steps type="navigation" size="small" :current="stepObj.list[0].current">
                <a-step
                    v-for="(item, index) in stepObj.list[0].list"
                    :disabled="item.disabled"
                    :title="item.label"
                    :key="index"
                ></a-step>
            </a-steps>
            <keep-alive>
                <component
                    :is="stepObj.list[0].list[stepObj.list[0].current].component"
                    v-bind="stepObj.list[0].list[stepObj.list[0].current].params"
                    :record="applyNeedData.record"
                    :applyNeedData="applyNeedData"
                    @updateState="updateState"
                    :isEdit="isEdit"
                ></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import { applyApi } from '@/common/api/applyManage.js'

export default {
    data() {
        const notList = [
            { formType: 'radio', label: '1.参评年及前5个自然年内发生特别重大事故灾难', key: 'not1' },
            { formType: 'radio', label: '2.参评年及前3个自然年内发生重大事故灾难', key: 'not2' },
            {
                formType: 'radio',
                label: '3.参评年及前1个自然年内，发生重特大环境污染和生态破坏事件、药品安全事件和食品安全事故，或者因工作不力导致重特大自然灾害事件损失扩大、造成恶劣影响',
                key: 'not3',
            },
            { formType: 'radio', label: '4.已获得命名城市被撤销命名未满2年', key: 'not4' },
            {
                formType: 'radio',
                label: '5.参评年及前1个自然年，因城市安全有关工作不力，被上级党委、政府、安委会约谈、通报',
                key: 'not5',
            },
            {
                formType: 'radio',
                label: '6.国务院安委会及国务院安办、省安委会及省安办挂牌督办的重大安全隐患未按时整改到位',
                key: 'not6',
            },
            { formType: 'radio', label: '7.其他不宜参加四川省安全发展示范城市创建的情形', key: 'not7' },
        ]
        const baseInfoList = [
            { label: '城市名称', key: 'cityName', formType: 'input', disabled: true },
            { label: '行政级别', key: 'xzjb', formType: 'select', disabled: true },
            {
                label: '行政隶属',
                key: 'xzls',
                formType: 'select',
                disabled: true,
            },
            // { label: '申报年度(试点城市填写试点年度)', key: 'applyYear', formType: 'year' },
            { label: '创建工作领导组长', key: 'cjgzzyfzr', formType: 'input', disabled: true },
            { label: '创建工作主要负责人联系电话', key: 'cjgzzyfzrdh', formType: 'input', disabled: true },
            { label: '安办主要负责人', key: 'abzyfzr', formType: 'input', disabled: true },
            { label: '安办主要负责人联系电话', key: 'abzyfzrdh', formType: 'input', disabled: true },
            { label: '日常工作联系人', key: 'rcgzlxr', formType: 'input', disabled: true },
            { label: '日常工作联系人电话', key: 'rcgzlxrdh', formType: 'input', disabled: true },
        ]
        const materialList = [
            { label: '复核申请请示', key: '复核申请请示', formType: 'upload' },
            { label: '创建工作领导小组文件', key: '创建工作领导小组文件', formType: 'upload' },
            {
                label: '创建工作领导小组成立时间',
                key: '创建工作领导小组成立时间',
                formType: 'date',
            },
            { label: '安全发展示范城市创建工作方案', key: '安全发展示范城市创建工作方案', formType: 'upload' },
            {
                label: '印发安全发展示范城市创建工作方案时间',
                key: '印发安全发展示范城市创建工作方案时间',
                formType: 'date',
            },
            { label: '城市创建工作情况材料', key: '城市创建工作情况材料', formType: 'upload' },
            { label: '第三方自评机构或人员', key: '第三方自评机构或人员', formType: 'input' },
            { label: '第三方自评报告', key: '第三方自评报告', formType: 'upload' },
            { label: '自评问题整改情况、计划', key: '自评问题整改情况、计划', formType: 'upload' },
        ]

        // stepObj第一层list为左侧节点列表
        // 第二层list为上方子节点列表
        return {
            stepObj: {
                current: 0,
                list: [
                    {
                        label: '城市自评中',
                        current: 0,
                        list: [
                            {
                                label: '否决项',
                                component: () => import('./modal/NotItem.vue'),
                                params: {
                                    list: notList,
                                },
                            },
                            {
                                label: '填写基本信息',
                                component: () => import('./modal/BaseInfo.vue'),
                                params: {
                                    list: baseInfoList,
                                },
                            },
                            {
                                label: '资料上传',
                                component: () => import('./modal/material.vue'),
                                params: {
                                    list: materialList,
                                },
                            },
                            {
                                label: '自评打分',
                                component: () => import('./modal/SelfEvaluation.vue'),
                                params: {
                                    list: [{ label: '自评表', key: 'selfEvaluation' }],
                                },
                            },
                        ],
                    },
                    {
                        label: '复核中',
                    },
                    {
                        label: '复核退回',
                    },
                    {
                        label: '复核终止',
                    },
                    {
                        label: '综合评议中',
                    },
                    {
                        label: '综合评议退回',
                    },
                    {
                        label: '综合评议终止',
                    },
                    {
                        label: '综合评议完成',
                    },
                    {
                        label: '命名授牌完成',
                    },
                    {
                        label: ' 撤销命名、摘牌',
                    },
                ],
            },
        }
    },
    props: {
        applyNeedData: {
            type: Object,
            required: false,
        },
        isEdit: {
            type: Boolean,
            required: false,
        },
    },
    mounted() {
        setTimeout(() => {
            this.stepObj.current = (this.applyNeedData?.record?.cjzt || 1) - 1
            this.stepObj.list[0].list[1].params.list.forEach(item => {
                if (item.key === 'xzjb') {
                    item.options = [
                        {
                            value: this.applyNeedData.baseInfoDetail.xzjb,
                            label: this.applyNeedData.baseInfoDetail.xzjbName,
                        },
                    ]
                }
                if (item.key === 'xzls') {
                    item.options = [
                        {
                            value: this.applyNeedData.baseInfoDetail.xzls,
                            label: this.applyNeedData.baseInfoDetail.xzlsName,
                        },
                    ]
                }
            })
        }, 500)
    },
    computed: {},
    methods: {
        updateState(status) {
            if (status === 'back') {
                this.$emit('tabChange', 'list')
            }
            if (status === 'nextStep') {
                this.stepObj.list[0].current += 1
            }
            if (status === 'previousStep') {
                this.stepObj.list[0].current -= 1
            }
        },
        horizontalStepChange(val) {
            this.stepObj.list[0].current = val
        },
    },
}
</script>

<style lang="scss" scoped>
.tab-box {
    height: calc(100vh - 370px);
    overflow-y: auto;
}
</style>
